import {designPage, reactive} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {Checkbox, CheckboxGroup} from "../../../../packages";

export const demo1 = designPage(() => {

  const state = reactive({
    flag: false
  });

  return () => (
    <DemoRow title="基本用法">
      <Checkbox v-model={state.flag} label="真假值"/> {JSON.stringify(state.flag)}
    </DemoRow>
  );
});

export const demo2 = designPage(() => {

  const state = reactive({
    formData: {} as any
  });

  return () => (
    <DemoRow title="多选组">
      <CheckboxGroup v-model={state.formData.flag}>
        <Checkbox checkboxForAll/>
        <Checkbox label="Vue2.0" value="vue2"/>
        <Checkbox label="Vue3.0" value="vue3"/>
        <Checkbox label="React" value="react"/>
        <Checkbox label="Angular" value="angular"/>
      </CheckboxGroup>
      {JSON.stringify(state.formData.flag)}
    </DemoRow>
  );
});
export const demo2_1 = designPage(() => {

  const state = reactive({
    formData: {} as any
  });

  return () => (
    <DemoRow title="多选组:arraystring">
      <CheckboxGroup v-model={state.formData.flag} valueType="arraystring">
        <Checkbox checkboxForAll/>
        <Checkbox label="Vue2.0" value="vue2"/>
        <Checkbox label="Vue3.0" value="vue3"/>
        <Checkbox label="React" value="react"/>
        <Checkbox label="Angular" value="angular"/>
      </CheckboxGroup>
      {JSON.stringify(state.formData.flag)}
    </DemoRow>
  );
});


export const demo4 = designPage(() => {

  const state = reactive({
    formData: { flag: [{ id: '3', label: 'React' }] } as any
  });

  const options = [
    { id: '1', label: 'Vue2.0' },
    { id: '2', label: 'Vue3.0' },
    { id: '3', label: 'React' },
    { id: '4', label: 'Angular' },
  ];

  return () => (
    <DemoRow title="绑定对象">
      <CheckboxGroup v-model={state.formData.flag}>
        <Checkbox checkboxForAll/>
        {options.map(option => (
          <Checkbox label={option.label} value={option} key={option.label}/>
        ))}
      </CheckboxGroup>
      <br/>
      <br/>
      <CheckboxGroup v-model={state.formData.flag}>
        {options.map(option => (
          <Checkbox label={option.label} value={option} key={option.label}/>
        ))}
      </CheckboxGroup>
      {JSON.stringify(state.formData.flag)}
    </DemoRow>
  );
});
